<template>
	<view class="tipsText">店铺填写越详情,审核越精准</view>
	<view class=" u-m-l-28 u-m-r-28 u-p-25 bg-white" style="overflow: hidden;border-radius: 28upx;">
		<u-form :error-type="['border-bottom','toast']" :label-style="labelStyle" :border-bottom="false"
			labelWidth="auto" :model="form" ref="formEl" >
			<u-form-item label="联系人" prop="linkName">
				<u-input input-align="right" v-model="form.linkName"></u-input>
			</u-form-item>
			<u-form-item label="联系人电话" prop="linkPhone">
				<u-input type="number" input-align="right" v-model="form.linkPhone"></u-input>
			</u-form-item>
			<u-form-item label="备用电话" prop="linkPhoneTwo">
				<u-input type="number" input-align="right" v-model="form.linkPhoneTwo"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<template #right>
					<u-radio-group active-color="#ffc300" shape="circle" v-model="form.sex">
						<u-radio :name="1">男</u-radio>
						<u-radio :name="2">女</u-radio>
					</u-radio-group>
				</template>
			</u-form-item>
			<u-form-item label="商户简称" prop="businessShortName">
				<u-input input-align="right" v-model="form.businessShortName"></u-input>
			</u-form-item>
			<u-form-item label="商户logo" label-position="top" prop="businessLogo">
				<u-upload :auto-upload="false" ref="uploads" max-count="1"></u-upload>
			</u-form-item>
			<u-form-item label="是否开通周边服务" prop="openFlag">
				<template #right>
					<u-radio-group active-color="#ffc300" shape="circle" v-model="form.openFlag">
						<u-radio :name="0">是</u-radio>
						<u-radio :name="1">否</u-radio>
					</u-radio-group>
				</template>
			</u-form-item>
			<u-form-item label="经营方式" prop="manageType">
				<template #right>
					<u-radio-group active-color="#ffc300" shape="circle" v-model="form.manageType">
						<u-radio :name="1">自营</u-radio>
						<u-radio :name="2">托管</u-radio>
					</u-radio-group>
				</template>
			</u-form-item>
		<!-- 	<view class="u-flex ">
				<u-form-item label="" prop="businessBeginHours">
					<u-input @click="start_time = true" disabled border border-color='#ffc300' placeholder="开始营业时间"
						input-align="center" v-model="form.businessBeginHours"></u-input>
				</u-form-item>
				<text class="u-m-l-20 u-m-r-20">至</text>
				<u-form-item label="" prop="businessEndHours">
					<u-input @click="end_time = true" disabled border border-color='#ffc300' placeholder="结束营业时间"
						input-align="center" v-model="form.businessEndHours"></u-input>
				</u-form-item>
			</view> -->
		</u-form>
	</view>

	<view class="u-p-t-80 u-p-b-80">
		<view class="submit" @click="submit">确认信息</view>
	</view>

	<u-picker v-model="start_time" mode="time" :params="params" @confirm="startConfirm"
		:default-time="startVal"></u-picker>
	<u-picker v-model="end_time" mode="time" :params="params" @confirm="endConfirm" :default-time="endVal"></u-picker>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import shopApi from '@/api/shop';
	import { onReady } from '@dcloudio/uni-app'
	const formEl = ref(null)
	const uploads = ref(null)
	const start_time = ref(false)
	const end_time = ref(false)
	const startVal = ref()
	const endVal = ref()
	const labelStyle = reactive({
		fontSize: '22upx'
	})
	const params = reactive({
		year: false,
		month: false,
		day: false,
		hour: true,
		minute: true,
		second: false
	})
	const form = reactive({
		linkName: '',//联系人姓名
		linkPhone: '',//联系人电话
		businessShortName: '',//商户简称,
		linkPhoneTwo: '',//备用电话
		sex: 1,//性别
		openFlag: 1,//是否开通周边服务
		manageType: 1,//经营方式,
		// businessBeginHours: '9:00',//开始营业时间
		// businessEndHours: '18:00',//结束营业时间
		businessLogo: ''
	})
	const rules = reactive({
		linkName: {
			required: true, message: '请输入联系人姓名', trigger: ['change', 'blur']
		},
		linkPhone: {
			required: true, message: '请输入联系人电话', trigger: ['change', 'blur']
		},

		linkPhoneTwo: {
			required: true, message: '请输入备用电话', trigger: ['change', 'blur']
		},
		businessShortName: {
			required: true, message: '请输入商户简称', trigger: ['change', 'blur']
		}


	})

	const startConfirm = (e) => {
		form.businessBeginHours = `${e.hour}:${e.minute}`
	}
	const endConfirm = (e) => {
		form.businessEndHours = `${e.hour}:${e.minute}`
	}
	const submit = () => {

		formEl.value.validate((vali : boolean) => {
			if (vali) {
				if (form.businessLogo == "") {
					if (uploads.value.lists.length > 0) {
						uni.getFileSystemManager().readFile({
							filePath: uploads.value.lists[0].url,
							encoding: 'base64',
							success: btye => {
								Object.assign(form, { businessLogo: btye.data })
								submitPost()
							}
						})

					} else {
						return uni.showToast({
							title: '请上传商户logo',
							icon: "none"
						})
					}
				}else{
					submitPost()
				}
			}
		})
	}

    const submitPost = ()=>{
		shopApi.setShopDetal(form).then(res => {
			uni.showToast({
				title: '设置成功',
				success: () => {
					let time = setTimeout(() => {
						uni.navigateBack()
						clearTimeout(time)
					}, 1000)
				}
			})
		})
	}

	onReady(() => {
		shopApi.getShopDetal().then(res => {
			let list = []
		    Object.keys(form).map(item=>{
				list.push(item)
			})
			let resObj = JSON.stringify(res.data,list)
			Object.assign(form,JSON.parse(resObj))

			startVal.value = form.businessBeginHours
			endVal.value = form.businessEndHours
			formEl.value.setRules(rules)
			uploads.value.lists.push({url:form.businessLogo})

		})



	})
</script>

<style lang="scss" scoped>
	.tipsText {
		font-size: 26upx;
		color: #999999;
		padding: 38upx 30upx;
	}

	.submit {
		width: 80%;
		margin: auto;
		// position: fixed;
		// left: 50%;
		// transform: translateX(-50%);
		// bottom: 80upx;
		// width: 560upx;
		border-radius: 90upx;
		height: 82upx;
		background-color: #ffc300;
		color: white;
		box-shadow: 2upx 8upx 16upx rgba(10, 10, 10, .2);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
